<template>
  <view class="notification-container">
    <view class="header">
      <text class="title">发布通知</text>
      <text class="subtitle">向学生发送重要通知</text>
    </view>

    <view class="notification-form">
      <view class="form-item">
        <text class="label">通知标题</text>
        <input v-model="form.title" placeholder="请输入通知标题" class="input" />
      </view>
      
      <view class="form-item">
        <text class="label">通知内容</text>
        <textarea v-model="form.content" placeholder="请输入通知内容" class="textarea" />
      </view>
      
      <view class="form-item">
        <text class="label">接收范围</text>
        <view class="recipient-selector">
          <view 
            v-for="option in recipientOptions" 
            :key="option.value"
            :class="['recipient-option', { active: form.recipientType === option.value }]"
            @click="form.recipientType = option.value"
          >
            {{ option.label }}
          </view>
        </view>
        
        <view v-if="form.recipientType === 'specific'" class="class-selector">
          <text class="selector-label">选择班级</text>
          <view class="class-tags">
            <view 
              v-for="classItem in classes" 
              :key="classItem.id"
              :class="['class-tag', { active: selectedClasses.includes(classItem.id) }]"
              @click="toggleClass(classItem.id)"
            >
              {{ classItem.name }}
            </view>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">紧急程度</text>
        <view class="urgency-selector">
          <view 
            v-for="level in urgencyLevels" 
            :key="level.value"
            :class="['urgency-level', { active: form.urgency === level.value }]"
            @click="form.urgency = level.value"
          >
            <text class="level-icon">{{ level.icon }}</text>
            <text class="level-text">{{ level.label }}</text>
          </view>
        </view>
      </view>
      
      <button class="publish-btn" @click="publishNotification">发布通知</button>
    </view>

    <view class="notification-history">
      <text class="section-title">已发布通知</text>
      
      <view v-if="notifications.length === 0" class="empty-state">
        <text>暂无通知记录</text>
      </view>
      
      <view v-else class="notifications-list">
        <view 
          v-for="notification in notifications" 
          :key="notification.id"
          class="notification-item"
          :class="`urgency-${notification.urgency}`"
        >
          <view class="notification-header">
            <text class="notify-title">{{ notification.title }}</text>
            <view class="urgency-badge" :class="`urgency-${notification.urgency}`">
              {{ getUrgencyText(notification.urgency) }}
            </view>
          </view>
          <text class="notify-content">{{ notification.content }}</text>
          <view class="notification-footer">
            <text class="notify-recipient">接收: {{ getRecipientText(notification.recipientType) }}</text>
            <text class="notify-time">{{ notification.publishTime }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { api } from '@/utils/request.js'

export default {
  data() {
    return {
      form: {
        title: '',
        content: '',
        recipientType: 'all', // all: 全体学生, specific: 指定班级
        urgency: 'normal' // low, normal, high, urgent
      },
      recipientOptions: [
        { label: '全体学生', value: 'all' },
        { label: '指定班级', value: 'specific' }
      ],
      urgencyLevels: [
        { label: '普通', value: 'normal', icon: '💬' },
        { label: '重要', value: 'high', icon: '⚠️' },
        { label: '紧急', value: 'urgent', icon: '🚨' }
      ],
      classes: [
        { id: 1, name: '计算机1班' },
        { id: 2, name: '计算机2班' },
        { id: 3, name: '软件工程1班' },
        { id: 4, name: '软件工程2班' },
        { id: 5, name: '网络工程1班' },
        { id: 6, name: '网络工程2班' }
      ],
      selectedClasses: [],
      notifications: []
    }
  },
  
  onLoad() {
    this.loadNotifications()
  },
  
  methods: {
    async publishNotification() {
      if (!this.form.title || !this.form.content) {
        uni.showToast({ title: '请填写标题和内容', icon: 'none' })
        return
      }
      
      if (this.form.recipientType === 'specific' && this.selectedClasses.length === 0) {
        uni.showToast({ title: '请选择接收班级', icon: 'none' })
        return
      }
      
      try {
        const publishData = {
          ...this.form,
          specificClasses: this.form.recipientType === 'specific' ? this.selectedClasses : []
        }
        
        const res = await api.publishNotification(publishData)
        
        if (res.code === 200) {
          uni.showToast({ title: '发布成功', icon: 'success' })
          this.resetForm()
          this.loadNotifications()
        }
      } catch (error) {
        uni.showToast({ title: '发布失败', icon: 'none' })
      }
    },
    
    resetForm() {
      this.form = {
        title: '',
        content: '',
        recipientType: 'all',
        urgency: 'normal'
      }
      this.selectedClasses = []
    },
    
    async loadNotifications() {
      try {
        const res = await api.getNotifications()
        if (res.code === 200) {
          this.notifications = res.data
        }
      } catch (error) {
        console.error('加载通知失败:', error)
        // 模拟数据
        this.notifications = [
          {
            id: 1,
            title: '期末考试安排通知',
            content: '本学期期末考试将于下周开始，请同学们做好准备。',
            recipientType: 'all',
            urgency: 'high',
            publishTime: '2024-01-15 10:00'
          },
          {
            id: 2,
            title: '教室设备维护通知',
            content: 'A101教室本周六进行设备维护，暂停使用。',
            recipientType: 'specific',
            urgency: 'normal',
            publishTime: '2024-01-14 15:30'
          },
          {
            id: 3,
            title: '紧急停课通知',
            content: '因天气原因，今天下午所有课程暂停。',
            recipientType: 'all',
            urgency: 'urgent',
            publishTime: '2024-01-13 08:00'
          }
        ]
      }
    },
    
    toggleClass(classId) {
      const index = this.selectedClasses.indexOf(classId)
      if (index > -1) {
        this.selectedClasses.splice(index, 1)
      } else {
        this.selectedClasses.push(classId)
      }
    },
    
    getUrgencyText(urgency) {
      const map = {
        normal: '普通',
        high: '重要',
        urgent: '紧急'
      }
      return map[urgency] || '普通'
    },
    
    getRecipientText(recipientType) {
      return recipientType === 'all' ? '全体学生' : '指定班级'
    }
  }
}
</script>

<style scoped>
.notification-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.header {
  margin-bottom: 40rpx;
}

.title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #666;
}

.notification-form {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.input, .textarea {
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
}

.textarea {
  height: 200rpx;
}

.recipient-selector {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.recipient-option {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  transition: all 0.3s;
}

.recipient-option.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.selector-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.class-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.class-tag {
  padding: 16rpx 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 30rpx;
  font-size: 24rpx;
  transition: all 0.3s;
}

.class-tag.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.urgency-selector {
  display: flex;
  gap: 15rpx;
}

.urgency-level {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  transition: all 0.3s;
}

.urgency-level.active {
  border-color: #667eea;
  background: #f0f4ff;
}

.urgency-level.urgent.active {
  border-color: #ff4757;
  background: #fff0f0;
}

.level-icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}

.level-text {
  font-size: 24rpx;
}

.publish-btn {
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 24rpx;
  font-size: 28rpx;
  width: 100%;
}

.notification-history {
  background: white;
  border-radius: 15rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.empty-state {
  text-align: center;
  padding: 60rpx;
  color: #999;
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.notification-item {
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 10rpx;
  border-left: 6rpx solid #667eea;
}

.notification-item.urgency-high {
  border-left-color: #ffa502;
}

.notification-item.urgency-urgent {
  border-left-color: #ff4757;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.notify-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.urgency-badge {
  padding: 8rpx 16rpx;
  border-radius: 15rpx;
  font-size: 20rpx;
  background: #667eea;
  color: white;
}

.urgency-badge.urgency-high {
  background: #ffa502;
}

.urgency-badge.urgency-urgent {
  background: #ff4757;
}

.notify-content {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
  display: block;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notify-recipient {
  font-size: 22rpx;
  color: #999;
}

.notify-time {
  font-size: 22rpx;
  color: #999;
}
</style>